import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  HomeOutlined,
  UserOutlined,
  CodeOutlined,
  DatabaseOutlined
} from '@ant-design/icons';
import { Layout, Menu, Button, theme } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';

const { Header, Sider, Content } = Layout;

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const location = useLocation();
  const defaultMenuKey = location.pathname.slice(1);
  const navigate = useNavigate();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const handlerChangeMenu = (item: any) => {
    navigate(`/${item.key}`);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        {/* <div className="demo-logo-vertical" /> */}
        <Menu
          onClick={handlerChangeMenu}
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[defaultMenuKey]}
          items={[
            {
              key: 'dashboard',
              icon: <HomeOutlined />,
              label: '首页',
            },
            {
              key: 'museumUser',
              icon: <UserOutlined />,
              label: '用户管理-国家博物馆',
            },
            {
              key: 'palaceUser',
              icon: <UserOutlined />,
              label: '用户管理-故宫',
            },
            {
              key: 'taskList',
              icon: <CodeOutlined />,
              label: '任务列表',
            },
            {
              key: 'orderList',
              icon: <DatabaseOutlined />,
              label: '订单列表',
            },
            {
              key: 'userList',
              icon: <UserOutlined />,
              label: '账号',
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;